<template>
  <afl-loading v-if="!remoteData.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer  v-else>
    <el-container class="first-container">
      <!--<editor-fold desc="数据汇总">-->
      <el-header class="header">
        <line-header :processName="$t('mes.healthArea')" :data="remoteData.processCount"></line-header>
      </el-header>
      <!--</editor-fold>-->
      <el-container class="second-container">
        <!--<editor-fold desc="条线选择">-->
        <el-aside class="second-aside">
          <processLine :title="$t('mes.healthArea')" :list="lines" @handle="menuClick" :frequency="remoteData.refreshFrequency" :currentLine="[]"></processLine>
        </el-aside>
        <!--</editor-fold>-->
        <!--<editor-fold desc="数据展示">-->
        <el-container class="second-main">
          <!--<editor-fold desc="单条线数据汇总">-->
          <el-header class="sum-wrapper">
            <realDataCard :data="remoteData.realTimeData" :tableData="remoteData.realTimeRGVData"></realDataCard>
          </el-header>
          <!--</editor-fold>-->
          <el-main class="dg-wrapper">
            <history-data-dg :queryParams="queryParams" :data="remoteData.historyData" :loading="!remoteData.historyDataDgReady"
                             @search="updateQueryParams"></history-data-dg>
          </el-main>
        </el-container>
        <!--</editor-fold>-->
      </el-container>
    </el-container>
  </fullScreenContainer>
</template>

<script>
import { provide, reactive, ref } from 'vue'
import loading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import processLine from '@/components/mes/common/processLine'
import lineHeader from '@/components/mes/JCLines/lineHeader'
import getKeepingData from '@/views/mes/KeepingArea/getKeepingData'
import realDataCard from '@/components/mes/KeepingArea/realDataCard'
import historyDataDg from '@/components/mes/KeepingArea/historyDataDg'
import i18n from '@/hooks/language'
import ScaleBox from 'vue3-scale-box'
import shiftTime from '@/hooks/shiftTime'

export default {
  name: 'THLines',
  components: {
    aflLoading: loading,
    processLine,
    lineHeader,
    fullScreenContainer,
    realDataCard,
    historyDataDg
  },
  setup () {
    shiftTime()
    const { t } = i18n()
    const ready = ref(false)
    const productionLineCode = ref(t('wms.extrusionAealthZone'))
    const lines = ref([
      {
        code: 'JC',
        productionLineCode: t('wms.extrusionAealthZone')
      },
      {
        code: 'TH',
        productionLineCode: t('wms.fitHealthArea')
      }
    ])
    const queryParams = reactive({
      processCode: 'JC',
      page: 1,
      rows: 10,
      total: 0
    })
    const menuClick = (processRow) => {
      queryParams.processCode = processRow.code
      productionLineCode.value = processRow.productionLineCode
    }
    const { remoteData } = getKeepingData(queryParams, false)
    /* 更新查询参数 */
    const updateQueryParams = (params) => {
      Object.assign(queryParams, params)
    }
    /* 依赖注入 */
    provide('queryParams', queryParams)
    provide('updateQueryParams', updateQueryParams)
    provide('productionLineCode', productionLineCode)
    return {
      ready,
      menuClick,
      queryParams,
      lines,
      remoteData,
      updateQueryParams
    }
  }
}
</script>

<style scoped lang="scss">
@forward "index";
</style>
